<template>
	<view>
		<shop-nav :title="title"></shop-nav>
		<view class="main" v-if="!pageLoading">
			<view class="content">
				<!-- 头 -->
				<view class="goods-img">
					<!-- 图片存放位置 -->
					<img :src="goods.url" mode="widthFix">
					<!-- 购物车按钮 -->

				</view>
				<view class="goods-introduce mrb-10">
					<!-- 商品介绍 -->
					<view class="goods-item">
						<view class="price">
							<span>{{goods.price}}</span>
						</view>
						<view class="title mrb-10">
							<text class="h4">{{goods.title}}</text>
						</view>
					</view>
					<view class="goods-parameter mrt-10">
						<!-- 参数 -->
						<view class="specifications parameter-item row">
							<view class="parameter-title col-xl-6">
								<label>规格</label>
							</view>
							<view class="parameter-body col-xl-6">
								<u-collapse :border="false" :value="[0]">
									<u-collapse-item :title="`共${goods.types.length}种规格可选`">
										<view class="row">
											<view style="margin: 0 4px;" v-for="(item,key) in goods.types" :key="key">
												<u-button type="info " shape="circle" :text="item" size="small"
													:plain="true" :hairline="true"></u-button>
											</view>
										</view>
									</u-collapse-item>
								</u-collapse>
							</view>
						</view>
						<view class="fms parameter-item row">
							<view class="parameter-title col-xl-6">
								<label>配送</label>
							</view>
							<view class="parameter-body col-xl-6">
								<view class="text">至<span class="address">{{ local.address }}</span><span
										class="postage">邮费3元</span>
								</view>
							</view>
						</view>
						<view class="service parameter-item row">
							<view class="parameter-title col-xl-6">
								<label>服务</label>
							</view>
							<view class="parameter-body col-xl-6">
								<view class="text">
									<text v-for="(item,key) in goods.services" :key="key">
										{{item}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="sticky mrb-10"
					:style="'top: '+ safeAreaTopHeight +'px;bottom:' + safeAreaBottomHeight + 'px'">
					<view class="row">
						<view class="col-xl-3">
							<view class="text">
								<u-text prefixIcon="kefu-ermai" iconStyle="font-size: 19px" type="primary" text="客服"
									align="center" @click="toCustom"></u-text>
							</view>
						</view>
						<view class="col-xl-3">
							<!-- 可修改，变成动态 -->
							<view class="text">
								<u-text prefixIcon="heart" iconStyle="font-size: 19px" type="warning" text="收藏"
									align="center" @click="collect"></u-text>
							</view>
						</view>
						<view class="col-xl-3">
							<u-button type="info" shape="circle" text="加购物车" @click="addBuycar"></u-button>
						</view>
						<view class="col-xl-3">
							<u-button type="primary" shape="circle" text="立即购买" @click="goBuy"></u-button>
						</view>
					</view>
				</view>
				<view class="goods-details">
					<!-- 详情，可能是富文本样式，也可能是一打富文本图片 -->
					我是一打图片.....or详细数据......
				</view>
			</view>
		</view>
		<shop-bar :current="1"></shop-bar>
		<u-loading-page :loading="pageLoading" :loading-text="loadText"></u-loading-page>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getNavIconDistance, getBarIconDistance } from '@/utils/utils.js';
	export default {
		computed: {
			...mapGetters(['local']), // 取出vuex中用户数据
		},
		onLoad(option) {
			var data = JSON.parse(option.goods); // 字符串转对象
			this.title = data.title;
			this.getLocal();
			this.getGoods(data.id);

		},
		data() {
			return {
				safeAreaTopHeight: 0,
				safeAreaBottomHeight: 0,
				// 页面标题
				title: '扇子',
				// 页面加载
				pageLoading: true,
				// 加载文字
				loadText: '努力加载商品中...',
				// 商品对象
				goods: {
					id: 0,
					title: '扇子0',
					url: '../../../static/waterfall/1.jpg',
					types: [
						"半面玲珑", "樱花蝴蝶", "千里江山"
					],
					services: [
						"7天无理由包退款"
					],
					price: 12,
					desc: '用来纳凉，冬凉夏暖特别好使！',
					// 是否有富文本数据...
				},
				// 地址
				address: '',
			}
		},
		methods: {
			getTopIconDistance() {
				this.safeAreaTopHeight = 0;
				this.safeAreaBottomHeight = 0;
				this.safeAreaTopHeight = getNavIconDistance() + 10;
				this.safeAreaBottomHeight = getBarIconDistance() + 50 + 10;
			},
			// 传入时调用，获取商品数据
			getGoods(id) {
				console.log(`获取商品的数据,id:${id}`);
				// 模拟发送后端
				setTimeout(() => {
					this.pageLoading = false;
				}, 2000)
			},
			getLocal() {
				if (this.local) {
					return
				}
				console.log("获取当前地址信息", this.local);
				this.$store.dispatch("user/setLocal")
			},
			// 找客服
			toCustom() {
				console.log("客服");
			},
			// 收藏
			collect() {
				console.log("收藏");
			},
			// 添加到购物车
			addBuycar() {
				console.log("购物车");
			},
			// 去购买
			goBuy() {
				console.log("购买");
			}
		},
		created() {
			this.getTopIconDistance();
		}
	}
</script>
s
<style scoped lang="scss">
	.goods-img {
		overflow: hidden;

		// 图片存放位置
		img {
			vertical-align: middle;
			width: 100%;

		}
	}

	.goods-introduce {
		padding: 0 5px;

		.goods-item {
			background: var(--white);
			padding: 10px;
			padding-left: 15px;
			border-radius: 0 0 10px 10px;
			box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .1);
			padding-bottom: 5px;

			.price {
				color: var(--red);
				font-size: var(--font-size-max);
				margin: 6px 0;

				&:before {
					content: "￥";
					font-size: var(--font-size-large);
				}

				&:after {
					content: " 元";
					font-size: var(--font-size-large);
				}
			}

			// .title{
			// 	padding-bottom: 5px;
			// }
		}

		.goods-parameter {
			background: var(--white);
			padding: 10px;
			padding-bottom: 15pxs;
			border-radius: 10px;
			box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2);

			.parameter-item {
				align-items: center;
				min-height: 40px;

				.parameter-title {
					flex: 0 0 20%;
					max-width: 20%;

					label {
						display: inline-block;
						text-align: center;
						width: 50px;
						box-sizing: border-box;
						margin-left: 5px;
						color: var(--text-light);
					}
				}

				.parameter-body {
					flex: 0 0 80%;
					max-width: 80%;

					.text {
						padding: 10px 15px;
					}
				}

			}

			.specifications {}

			.fms {
				.address {
					&:before {
						content: " ";
					}

					&::after {
						content: " ";
					}
				}

				.postage {
					color: var(--text-light);
				}
			}

			.service {}
		}
	}

	.sticky {
		height: 40px;
		background: var(--white);
		padding: 10px;
		padding-bottom: 15pxs;
		border-radius: 10px;
		box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2);
		position: sticky;
		bottom: 100px;

		.text {
			line-height: 40px;
			height: 100%;
		}
	}

	.goods-details {
		height: 1600px;
		background: var(--white);
		padding: 10px;
		padding-bottom: 15pxs;
		border-radius: 10px;
		box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2);
	}
</style>